<template>
<div class="picture-box">
    <div class="picture-box-title">图片数：{{pictures.length}}</div>
    <div>  
        <div class="picture-box-item picture-box-item-pic" v-for="(item, index) in pictures" :key="index" :style="{'background-image':`url(${item})`}">
            <div v-if="!disabled" class="picture-box-item-pic-delete" @click="handleDelete(index)"></div>
        </div>
        <div v-if="!disabled" class="picture-box-item picture-box-item-add" @click="showResourceModal=true"></div>  
    </div>
    <resource-core-modal v-model="showResourceModal" @on-selected="handleOnSelectedImage"></resource-core-modal>
</div>
</template>

<script lang="ts">
import ResourceCoreModal from './resource-core-modal';

export default {
    props: {
        value: {
            type: Array,
            default: () => []
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    components: {
        ResourceCoreModal
    },
    data() {
        return {
            pictures: this.value,
            showResourceModal: false
        }
    },
    computed: {
    },
    methods: {
        handleOnSelectedImage(items) {
            items.forEach(elem => this.pictures.push(elem.url));
        },
        handleDelete(index) {
            this.pictures.splice(index, 1);
        }
    },
    watch: {
        value() {
            this.pictures = this.value;
        }
    }
}
</script>

<style lang="less">
.picture-box {
    border: 1px solid #ddd;
    &-title {
        font-size: 12px;
        padding: 0 5px;
        color: #888;
        border-bottom: 1px solid #ddd;
    }
    &-item {
        position: relative;
        display: inline-block;
        height: 120px;
        width: 120px;
        border: 1px solid #ddd;
        margin: 5px;
        &-add {
            text-align: center;
            line-height: 120px;
            color: #ddd;
            font-size: 28px;
            cursor: pointer;
            &::after {
                position: absolute;
                top: 0;
                left: 0;
                content: "+";
                height: 100%;
                width: 100%;
            }
        }
        &-pic {
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            &-delete {
                position: absolute;
                text-align: center;
                top: 0;
                right: 0;
                width: 20px;
                height: 20px;
                line-height: 20px;
                background-color: rgba(0, 0, 0, .5);
                    cursor: pointer;
                &::after {
                    color: white;
                    content: 'x';
                }
            }
        }
    }
}
</style>
